<template>
  <div class="bookPageBg">
    <div class="book">
      <div id="pages" class="pages">
        <div class="page">
          <div class="pageContent bookCover" style="padding: 0">
            <img
              src="@/assets/images/img/book_two.jpg"
              alt=""
              width="300"
              height="440"
            />
          </div>
        </div>
        <div class="page">
          <div class="pageContent pageOne" style="margin-top: 50px">
            <div class="tc">
              <p>《无名》</p>
              <p>xxxxx</p>
            </div>
            <!-- <img src="@/assets/images/img/pageImg1.png" alt="" width="260"> -->
            <div class="flex">
              <div class="pageText">
                <p>xxxx</p>
                <p style="margin-top: -15px">xxxx</p>
              </div>
              <div>
                <!-- <img src="@/assets/images/img/pageImg2.png" alt="" width="100"> -->
              </div>
            </div>
          </div>
        </div>
        <div class="page">
          <div class="pageContent" style="margin-top: 70px">
            <p class="tc" style="margin-bottom: 10px">目录</p>
            <ul class="bookPageList">
              <li
                v-for="(item, index) in catalogueData"
                :key="index"
                @click.stop="catalogue(6)"
              >
                <div
                  class="list-line"
                  :style="{ 'background-color': item.color }"
                ></div>
                <span>{{ item.number }}</span>
                <span>{{ item.name }}</span>
                <p>
                  <img
                    src="@/assets/images/icon/star.svg"
                    alt=""
                    width="12"
                  />{{ item.starNum }}
                </p>
              </li>
            </ul>
          </div>
        </div>
        <template v-for="(item, index) in PageNumData" :key="index">
          <div class="page">
            <div class="pageContent" style="margin-top: 50px">
              <p class="tc">{{ item.title }}</p>
              <ul class="bookTaskList">
                <li class="taskListTitle">
                  <div
                    class="taskList-line"
                    style="background-color: #ffbb34"
                  ></div>
                  <p>项目名称</p>
                  <p>得分</p>
                  <p>星值</p>
                </li>
                <li
                  v-for="(citem, cindex) in item.taskData"
                  :class="{ disabled: citem.disabled }"
                  :key="cindex"
                >
                  <div
                    class="taskList-line"
                    :style="{ 'background-color': citem.color }"
                  ></div>
                  <p>
                    {{ citem.name }} <br />
                    <span>{{ citem.number }}</span>
                  </p>
                  <p>{{ citem.score }}</p>
                  <p>
                    <t-rate
                      disabled
                      v-model="rateValue"
                      :count="citem.rate"
                    ></t-rate>
                  </p>
                </li>
              </ul>
            </div>
          </div>
          <div class="page">
            <div class="pageContent" style="margin-top: 120px">
              <ul class="bookTaskList">
                <li
                  v-for="(citem, cindex) in item.taskData2"
                  :key="cindex"
                  :class="{ disabled: citem.disabled }"
                >
                  <div
                    class="taskList-line"
                    :style="{ 'background-color': citem.color }"
                  ></div>
                  <p>
                    {{ citem.name }} <br />
                    <span>{{ citem.number }}</span>
                  </p>
                  <p>{{ citem.score }}</p>
                  <p>
                    <t-rate
                      disabled
                      v-model="rateValue"
                      :count="citem.rate"
                    ></t-rate>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </template>
        <!-- 最后一页 -->
        <div class="page">
          <div class="pageContent"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import '@/assets/css/book.scss';
let rateValue = ref(1);
let catalogueData = ref([
  {
    color: '#00D6D5',
    starNum: 30,
    number: '01',
    name: '资产类审计',
  },
  {
    color: '#FC788A',
    starNum: 30,
    number: '02',
    name: '资产类审计',
  },
  {
    color: '#FFCC87',
    starNum: 30,
    number: '03',
    name: '资产类审计',
  },
  {
    color: '#EBC700',
    starNum: 30,
    number: '04',
    name: '资产类审计',
  },
  {
    color: '#007EB9',
    starNum: 30,
    number: '05',
    name: '资产类审计',
  },
]);
let PageNumData = ref([
  {
    title: '任务一：资产类审计',
    progress: 30,
    taskData: [
      {
        name: '资产类审计',
        number: '01',
        score: 100,
        rate: 3,
        color: '#00D6D5',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '02',
        score: 100,
        rate: 3,
        color: '#FC788A',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '03',
        score: 100,
        rate: 3,
        color: '#FFCC87',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '04',
        score: 100,
        rate: 3,
        color: '#EBC700',
        disabled: true,
      },
      {
        name: '资产类审计',
        number: '05',
        score: 100,
        rate: 3,
        color: '#007EB9',
        disabled: false,
      },
    ],
    taskData2: [
      {
        name: '资产类审计',
        number: '06',
        score: 100,
        rate: 3,
        color: '#00D6D5',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '07',
        score: 100,
        rate: 3,
        color: '#FC788A',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '08',
        score: 100,
        rate: 3,
        color: '#FFCC87',
        disabled: true,
      },
      {
        name: '资产类审计',
        number: '09',
        score: 100,
        rate: 3,
        color: '#EBC700',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '10',
        score: 100,
        rate: 3,
        color: '#007EB9',
        disabled: false,
      },
    ],
  },
  {
    title: '任务二：资产类审计',
    progress: 30,
    taskData: [
      {
        name: '资产类审计',
        number: '01',
        score: 100,
        rate: 3,
        color: '#00D6D5',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '02',
        score: 100,
        rate: 3,
        color: '#FC788A',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '03',
        score: 100,
        rate: 3,
        color: '#FFCC87',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '04',
        score: 100,
        rate: 3,
        color: '#EBC700',
        disabled: true,
      },
      {
        name: '资产类审计',
        number: '05',
        score: 100,
        rate: 3,
        color: '#007EB9',
        disabled: false,
      },
    ],
    taskData2: [
      {
        name: '资产类审计',
        number: '06',
        score: 100,
        rate: 3,
        color: '#00D6D5',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '07',
        score: 100,
        rate: 3,
        color: '#FC788A',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '08',
        score: 100,
        rate: 3,
        color: '#FFCC87',
        disabled: true,
      },
      {
        name: '资产类审计',
        number: '09',
        score: 100,
        rate: 3,
        color: '#EBC700',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '10',
        score: 100,
        rate: 3,
        color: '#007EB9',
        disabled: false,
      },
    ],
  },
  {
    title: '任务三：资产类审计',
    progress: 30,
    taskData: [
      {
        name: '资产类审计',
        number: '01',
        score: 100,
        rate: 3,
        color: '#00D6D5',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '02',
        score: 100,
        rate: 3,
        color: '#FC788A',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '03',
        score: 100,
        rate: 3,
        color: '#FFCC87',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '04',
        score: 100,
        rate: 3,
        color: '#EBC700',
        disabled: true,
      },
      {
        name: '资产类审计',
        number: '05',
        score: 100,
        rate: 3,
        color: '#007EB9',
        disabled: false,
      },
    ],
    taskData2: [
      {
        name: '资产类审计',
        number: '06',
        score: 100,
        rate: 3,
        color: '#00D6D5',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '07',
        score: 100,
        rate: 3,
        color: '#FC788A',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '08',
        score: 100,
        rate: 3,
        color: '#FFCC87',
        disabled: true,
      },
      {
        name: '资产类审计',
        number: '09',
        score: 100,
        rate: 3,
        color: '#EBC700',
        disabled: false,
      },
      {
        name: '资产类审计',
        number: '10',
        score: 100,
        rate: 3,
        color: '#007EB9',
        disabled: false,
      },
    ],
  },
]);
onMounted(() => {
  let pages: any = document.getElementsByClassName('page');
  let pageContents: any = document.getElementsByClassName('pageContent');
  let books = document.getElementsByClassName('book');
  for (let i = 0; i < pages.length; i++) {
    let page = pages[i];
    let pageContent = pageContents[i];
    if (i % 2 === 0) {
      page.style.zIndex = pages.length - i;
      pageContent.style.zIndex = pages.length - i;
    }
  }
  let state = false;
  for (let i = 0; i < pages.length; i++) {
    //Or let page = pages[i];
    pages[i].pageNum = i + 1;
    pages[i].onclick = function () {
      state = true;
      if (state) {
        books[0].classList.add('bookMove');
      }
      if (pages[i].pageNum % 2 === 0) {
        pages[i].classList.remove('flipped');
        pages[i].previousElementSibling.classList.remove('flipped');
      } else {
        pages[i].classList.add('flipped');
        pages[i].nextElementSibling.classList.add('flipped');
      }
    };
  }
});
const catalogue = (page: any) => {
  let pages = document.getElementsByClassName('page');
  for (let i = 0; i < page; i++) {
    pages[i].classList.add('flipped');
    pages[i].nextElementSibling!.classList.add('flipped');
  }
};
</script>
